<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  如果props是使用驼峰命名来命名的   如果再VUE的实例中使用需要在大写字母处使用- ,大写字母变成小写-->
  <cpn :c-info='info' :chlid-my-message ='message' ></cpn>
</div>


<template id="cpn">
<!--  在组件中，如果使用的值较多的时候，需要使用DIV来包裹-->
  <div>
    <h2>{{cInfo}}</h2>
    <h2>{{childMyMessage}}</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            info: {
                name: 'why',
                age: 17,
                height: 1.88
            },
            message:'来自实例的数据'
        },
        components: {
            'cpn': {
                template: '#cpn',
                props: {
                    cInfo: {
                        type: Object,
                        default() {
                            return [];
                        }
                    },
                    childMyMessage:{
                        type: String,
                        default:'来自组件的数据',
                    }
                }
            },


        }

    })
</script>

</body>
</html>